<template>
  <div>
    <router-view :link="'abc'"></router-view>
    <van-tabbar
      v-model="active"
      :placeholder="true"
      :route="true"
      :safe-area-inset-bottom="true"
    >
      <van-tabbar-item icon="wap-home-o" to="/home/index" v-if="active != 0"
        >首页</van-tabbar-item
      >
      <van-tabbar-item to="/home/index" v-else>
        <template #icon>
          <img src="@/assets/img/index/tuzi.png" class="bottomimg" /> </template
      ></van-tabbar-item>

      <van-tabbar-item
        icon="goods-collect-o"
        to="/home/wishlist"
        v-if="active != 1"
        >心愿单</van-tabbar-item
      ><van-tabbar-item to="/home/index" v-else
        >心愿单
        <template #icon> <img src="@/assets/img/index/tuzi2.png" /> </template
      ></van-tabbar-item>

      <van-tabbar-item icon="description" to="/home/news" v-if="active != 2"
        >消息</van-tabbar-item
      >
      <van-tabbar-item to="/home/index" v-else
        >消息
        <template #icon> <img src="@/assets/img/index/tuzi3.png" /> </template
      ></van-tabbar-item>

      <van-tabbar-item icon="user-o" to="/home/mine" v-if="active != 3"
        >我的</van-tabbar-item
      >
      <van-tabbar-item to="/home/index" v-else
        >我的
        <template #icon> <img src="@/assets/img/index/tuzi4.png" /> </template
      ></van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";

import { useRoute } from "vue-router";

export default {
  name: "Home",
  setup() {
    const active = ref(0);

    onMounted(() => {
      const route = useRoute();
      switch (route.path) {
        case "/home/index":
          active.value = 0;
          break;
        case "/home/wishlist":
          active.value = 1;
          break;
        case "/home/news":
          active.value = 2;
          break;
        case "/home/mine":
          active.value = 3;
          break;
      }
    });

    return { active };
  },
};
</script>

<style lang="less">
.home {
  width: 100px;
  height: 200px;
  background-color: antiquewhite;
}
.bottomimg {
  width: 32px;
  height: 32px !important;
}
.van-tabbar-item--active {
  color: var(--van-tabbar-item-text-color);
}
</style>
